<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>手机SVG导航图标特效 | 手机网站特效| 网页特效库</title>
		<meta name="keywords" content="SVG特效, 手机网站特效, css3动画, 网页特效" />
		<meta name="author" content="Luis Manuel for Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />

		<script src="js/segment.min.js"></script>
		<script src="js/ease.min.js"></script>
		<style>
			html,body{ font-family: "微软雅黑";}
		</style>
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<h1>手机SVG导航图标特效</h1>
			</header>
			<div class="content">
				<div class="device">
					<div class="device__screen">
						<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden">
							<svg width="1000px" height="1000px">
								<path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
								<path id="pathB" d="M 300 500 L 700 500"></path>
								<path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
							</svg>
							<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
						</div><!-- menu-icon-wrapper -->
						<div id="dummy" class="dummy">
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
						</div><!-- /dummy -->
					</div><!-- /device-content -->
				</div><!-- /device -->
			</div><!-- /content -->
			
			<div class="content">
				<h2 class="content__title">Scaled Version</h2>
				<div class="device device--alt">
					<div class="device__screen">
						<div id="menu-icon-wrapper2" class="menu-icon-wrapper" style="visibility: hidden">
							<svg width="1000px" height="1000px">
								<path id="pathD" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
								<path id="pathE" d="M 300 500 L 700 500"></path>
								<path id="pathF" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
							</svg>
							<button id="menu-icon-trigger2" class="menu-icon-trigger"></button>
						</div><!-- menu-icon-wrapper -->
						<div id="dummy2" class="dummy">
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
							<div class="dummy__item"></div>
						</div><!-- /dummy -->
					</div><!-- /device-content -->
				</div><!-- /device -->
			</div><!-- /content -->
			<!-- Related demos -->
		</div><!-- /container -->
		<div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">
			更多网页特效，请访问<a href="http://www.5iweb.com.cn">网页特效库</a>,欢迎加入网页特效库QQ交流群：258242983
		</div>
		<script src="js/main.js"></script>
	</body>
</html>
